<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4536705_hgsu4do1xdd.css">
    <style>
        html {
            width: 100%;
            height: 100%;
            margin: 0px;
        }

        .container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;

        }

        /* 导航栏 */
        .title {
            text-align: center;
            width: 100%;
            height: 50px;
            background-color: rgb(47, 59, 59);
        }

        .nav {
            display: flex;
            background-color: rgb(134, 118, 118);

            height: 50px;
        }

        /* 子导航栏 */
        .s_nav {
            color: white;
            width: 85%;
        }

        .s_nav>ul {
            margin-bottom: 0px;
            margin-top: 0px;
            list-style: none;
            display: flex;
            margin-left: 30%;
        }

        .s_nav>ul>div {
            margin-left: 50px;
            cursor: pointer;
            line-height: 40px;
            width: 50px;
            text-align: center;
        }

        .s_nav>ul>div>div {
            /* display: flex; */
            flex-direction: column;
            align-items: center;
            display: none;
        }

        /* 子导航栏内容 */
        .otherItem {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 20px bisque solid;
            position: absolute;
        }

        .otherItem2 {
            margin-top: 10px;
            background-color: bisque;
            position: absolute;
            text-align: center;
            width: var(--width);
        }

        .nav>div>input {
            margin-top: 10px;
            border-radius: 25px/50px;
            text-align: center;
        }

        span {
            color: aquamarine;
            position: absolute;
            margin-top: 12px;
            right: 4%;
        }

        /* 轮播图 */
        .banner {
            position: absolute;
            width: 100%;
            height: 500px;
            margin-top: 100px;
        }

        .banner>ul {
            display: flex;
            list-style: none;
        }

        .banner>div {
            position: absolute;
            top: 450px;
            left: 45%;
        }
/* 轮播图按钮 */
        .dot {
            display: flex;
        }

        .dot>li {
            font-size: 40px;
            margin-left: 50px;
            opacity: 0.5;
            cursor: pointer;
        }
        .dot>li:hover{
            color: red;
        }

        .banner>ul>li>a>img {
            position: absolute;
            left: 30%;
            height: 500px;
            width: 667px;
        }


        /* 轮播图卡片抑或是别的 */
        .smallBanner {
            width: 100%;
            display: flex;
            text-align: center;
            margin-top: 500px;

        }

        .smallBanner>div:first-child {
            margin-left: 100px;
        }

        .smallBanner>div>img {
            margin-top: 30px;
            width: 200px;
            height: 150px;
            margin-left: 100px;
            cursor: pointer;
        }

        /* 直接复制粘贴 */
        .footer {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="banner" id="banner">
            <ul>
                <li><a href=""><img
                            src="https://img0.baidu.com/it/u=1708458160,3452476592&fm=253&fmt=auto&app=120&f=JPEG?w=654&h=273"
                            alt=""></a></li>
                <li><a href=""><img
                            src="https://img2.baidu.com/it/u=867289034,2468836367&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
                            alt=""></a></li>
                <li><a href=""><img
                            src="https://codelover.club/files/stutasks/userID_18488/currNo_42/FtskHl23eTDexybSWlfw3UIvXY5x/%E8%BD%AE%E6%92%AD%E5%9B%BE%E4%B8%89.jpg"
                            alt=""></a></li>
                <li><a href=""><img
                            src="https://codelover.club/files/stutasks/userID_18488/currNo_42/FtskHl23eTDexybSWlfw3UIvXY5x/%E8%BD%AE%E6%92%AD%E5%9B%BE%E5%9B%9B.jpg"
                            alt=""></a></li>
            </ul>
            <div>
                <ul class="dot">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>

        </div>
        <div class="title">
            xx学网
        </div>
        <div class="nav">
            <div class="s_nav">
                <ul>
                    <div>html
                        <div>
                            <div class="otherItem"></div>
                            <div class="otherItem2">HTML课程</div>
                        </div>
                    </div>
                    <div>css
                        <div>
                            <div class="otherItem"></div>
                            <div class="otherItem2">css课程</div>
                        </div>
                    </div>
                    <div>js
                        <div>
                            <div class="otherItem"></div>
                            <div class="otherItem2">js课程</div>
                        </div>
                    </div>
                    <div>ps
                        <div>
                            <div class="otherItem"></div>
                            <div class="otherItem2">ps课程</div>
                        </div>
                    </div>
                    <div>photo
                        <div>
                            <div class="otherItem"></div>
                            <div class="otherItem2">photo课程</div>
                        </div>
                    </div>
                </ul>
            </div>
            <div>
                <input type="search">
                <span class="iconfont icon-sousuo"></span>
            </div>
        </div>
        <div class="smallBanner">
            <div><img src="https://img2.baidu.com/it/u=867289034,2468836367&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
                    alt=""></div>
            <div><img src="https://img2.baidu.com/it/u=867289034,2468836367&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
                    alt=""></div>
            <div><img src="https://img2.baidu.com/it/u=867289034,2468836367&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
                    alt=""></div>
            <div><img src="https://img2.baidu.com/it/u=867289034,2468836367&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500"
                    alt=""></div>

        </div>

        <div class="footer">
            <div>
                <div class="nav_foot">
                    &nbsp;&nbsp;
                    <a href="/sitemap.html" target="_blank"> 网站地图</a>&nbsp;&nbsp;<a href="/bottom/friend.html"
                        target="_blank"> 相关链接</a>&nbsp;&nbsp;<a href="/bottom/apply_image.html" target="_blank">
                        影像授权</a>&nbsp;&nbsp;<a href="/bottom/privacy/252.html" target="_blank"> 隐私政策</a>&nbsp;&nbsp;<a
                        href="/bottom/privacy/236341.html" target="_blank"> 版权声明</a>&nbsp;&nbsp;<a
                        href="/bottom/ask.html" target="_blank"> 留言板</a>&nbsp;&nbsp;<a
                        href="https://www.dpm.org.cn/singles_detail/252829.html" target="_blank"> 联系我们</a>&nbsp;&nbsp;<a
                        href="/bottom/aboutus.html" target="_blank"> 关于我们</a>&nbsp;&nbsp;
                </div>
            </div>
            <div>
                <div class="copyright">
                    &nbsp;&nbsp;网站维护：xx学网维修部&nbsp;&nbsp;&nbsp;联系方式：<a
                        href="mailto:gugong@dpm.org.cn">gugong@dpm.org.cn</a>

                </div>
                <div style="width:100%;text-align: center;min-height: 46px;">
                    <a target="_blank"
                        href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010102004165"
                        style="display:inline-block;text-decoration:none;height:20px;line-height:20px; vertical-align: middle;"><img
                            src="https://img.dpm.org.cn/Public/static/ico.png" style="float:left;" />
                        <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#b4b3b8;">xx学网
                            11010102004165号</p>
                    </a>
                    &nbsp;
                    <a style="display: inline-block;vertical-align: middle;"
                        href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">xx学网建设科技</a>
                    <br>
                    © xx学网 &nbsp;
                    <a href="http://www.fractal-technology.com/" target="_blank">xx学网建设科技</a>：<a
                        href="http://www.fractal-technology.com/" target="_blank">xx学网</a>
                    <br />
                </div>
            </div>
        </div>
        <script src="../哲/轮播图.js"></script>
        <script>
            let item = document.querySelectorAll(".s_nav>ul>div")
            let item2 = document.querySelectorAll(".s_nav>ul>div>div")
            for (let i = 0; i < 5; i++) {
                item[i].onmouseover = function () {
                    item2[i].style.display = "flex";
                }
                item[i].onmouseout = function () {
                    item2[i].style.display = "none";

                }
            }
            let item3 = document.querySelectorAll(".otherItem2")

            for (let i = 0; i < 5; i++) {
                item3[i].style.setProperty("--width", window.innerWidth + window.outerWidth + "px")
            }
        </script>
</body>

</html>